<template>
	<view class="font-13">
		<view class="flex just-between" style="border-bottom: 1rpx solid #e1e1e1;padding-bottom: 10rpx;">
			<view style="flex: 1;font-size: 32rpx;" class="flex align-center">
				<view
					style="height: 44rpx; background: #FB8333; border-radius: 8rpx;color: #fff;margin-right: 10rpx;text-align: center;line-height: 44rpx;padding: 4rpx 10rpx;"
					v-if="scope.deliveryTimeType == '2'">预订单</view>
				<view v-if="formatDuringText"><text v-if="formatDuringText.indexOf('已超时') == -1"
						style="color:#E43E00;font-weight: bold;">
						{{ formatDuringText }}</text><text v-if="formatDuringText.indexOf('已超时') == -1">送达</text><text
						v-else style="color:#E43E00;font-weight: bold;font-size: 32rpx;">{{ formatDuringText }}</text>
				</view>
			</view>
			<view class="flex">
				<view class="chnlbox" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }"
					v-if="chnlType">
					{{ chnlType.substring(0, 1) }}
				</view>
				<view class="chnltype" :style="{ backgroundColor: color, color: color ? '#fff' : '#000' }" v-else>
					{{ chnlType }}
				</view>
				<view v-if="!!scope.thirdOrderIndex" style="font-size: 42rpx;font-weight: bold;">
					<text>#</text>{{
						scope.thirdOrderIndex
					}}
				</view>
			</view>
		</view>
		<view class="flex just-between" style="padding: 12rpx 15rpx 12rpx 0;align-items: baseline;">
			<view
				style="width: 60rpx; height: 60rpx; background: #85B6FD;text-align: center;line-height: 60rpx;color: #fff;font-size: 28rpx;margin-right: 15rpx;border-radius: 60rpx;">
				送</view>
			<view style="flex: 1">
				<view class="flex just-between align-center">
					<view style="flex:1;">
						<view class="flex align-center" style="height: 50rpx;">
							<text style="font-size: 32rpx;font-weight: bold;">{{ scope.consigneeName || '匿名顾客' }}</text>
							<text style="margin-left: 9rpx;font-size: 25rpx;font-weight: bold;"
								v-if="scope.consigneePhoneLast">(尾号{{ scope.consigneePhoneLast }})</text>
						</view>
					</view>
					<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;margin-left: 6rpx;"
						class="flex align-center just-center" @click="openContactCustPop"
						v-if="scope.privacyConsigneePhone">
						<image src="../../../../static/img/bcmIcons/tel.png" style="height: 42rpx;width: 42rpx;">
						</image>
					</view>
				</view>
				<view class="flex just-between align-center">
					<view style="font-size: 32rpx;color: #4C4C4C;flex: 1;">{{ scope.consigneeAddress }}</view>
					<view style="width:70rpx;height: 70rpx;border-radius: 70rpx;background:#EDEDED;margin-left: 6rpx;"
						class="flex align-center just-center" @click="toMap" v-if="scope.consigneeAddress">
						<image src="../../../../static/img/bcmIcons//loca1.png" style="height: 42rpx;width: 42rpx;">
						</image>
					</view>
				</view>
				<view v-if="scope.buyerRemark"
					style="background: #DFF3FF;line-height: 35rpx;color: #4C4C4C;padding: 11rpx 7rpx 10rpx 7rpx;font-size: 32rpx;margin-bottom: 8rpx;border-radius: 0px 0px 11rpx 11rpx;margin-top: 8rpx;">
					<text>备注：</text>{{ scope.buyerRemark }}
				</view>
				<view class="flex just-between">
					<view class="" style="font-size: 32rpx;">
						订单金额<text style="color: #E43E00;margin-right: 10rpx;font-weight: bold;">{{
						formatPrice(scope.totalAmount) }}</text>
						商品 共<text style="font-weight: bold;margin-right: 10rpx;">{{ scope.orderGoodsNum }}件</text>
						重量<text style="font-weight: bold;">{{ scope.orderGoodsWeight }}kg</text>
					</view>
				</view>
			</view>
		</view>

		<eui-popup ref="contactCustPopup" type="bottom" :animation="false" background-color="#fff" :mask-click="true">
			<view class="popup-content">
				<view class="popup-title flex just-between">
					<view style="font-weight: bold;">
						联系顾客
					</view>
					<bcm-close-btn @click="closeContactCustPopup" />
				</view>
				<view
					style="padding-left: 30rpx;color: #000;background-color:#fff;box-sizing: border-box;padding-top:24rpx;font-size: 32rpx; line-height: 32rpx;">
					<view>
						<text v-if="scope.consigneeName">姓名：{{ scope.consigneeName }}</text>
						<text v-if="scope.consigneePhoneLast">(尾号{{ scope.consigneePhoneLast }})</text>
					</view>
					<view>
						<text v-if="scope.privacyConsigneePhone">电话：{{ scope.privacyConsigneePhone }}</text>
					</view>
					<view class="bottom-1" style="margin: 100rpx 0 50rpx 0;">
						<eui-button type="base" title="拨打电话" style="width: 50%" @click="handlePhoneCall" />
					</view>
				</view>
			</view>
		</eui-popup>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { formatPrice } from '../../../../hooks/bcmUseUntils';
import { getTimeDifferenceText, getTimeText } from '../../../../hooks/useDatetimeUtil';
import { computed, defineProps } from 'vue';
import BcmCloseBtn from '../../components/BcmCloseBtn.vue'

const props = defineProps<{
	scope?: any;
	chnlTypeList?: any;
	currentTime?: any;
}>()

const contactCustPopup = ref(false)

const openContactCustPop = () => {
	contactCustPopup.value.open('bottom');
}

const closeContactCustPopup = () => {
	contactCustPopup.value.close();
}

const handlePhoneCall = () => {
	// #ifdef APP-PLUS
	plus.device.dial(props.scope.privacyConsigneePhone, true);
	// #endif
}

const toMap = () => {
	uni.openLocation({
		latitude: Number(props.scope.consigneeLatitude),
		longitude: Number(props.scope.consigneeLongitude),
		name: props.scope.consigneeAddress,
		address: props.scope.consigneeAddress,
		success: function () {
			console.log('打开地图导航成功')
		},
		fail: function (error) {
			console.log(error, 'error')
		}
	})
}

const chnlType = computed(() => {
	return props.chnlTypeList.find(v => v.value == props.scope.chnlType)?.text || props.scope.chnlType
})
const color = computed(() => {
	return props.chnlTypeList.find(v => v.value == props.scope.chnlType)?.color || '#000'
})
const formatDuringText = computed(() => {
	if (!!props.scope.expectDeliveryTime) {
		let n = new Date(props.scope.expectDeliveryTime.replace(/-/g, "/")).getTime() - props.currentTime;
		if (n > 0) {
			return getTimeDifferenceText(props.scope.expectDeliveryTime)
		} else {
			return getTimeText(props.scope.expectDeliveryTime)
		}
	}
})
</script>
<style lang="scss" scoped>
@import "../../common/common.css";

.popup-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	background-color: #fff;

	.popup-title {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		height: 100rpx;
		padding-right: 36rpx;
		padding-left: 30rpx;
		font-size: 33rpx;
		line-height: 100rpx;
		border-bottom: 1rpx solid #f1f1f1;
	}
}

.bottom-1 {
	display: flex;
	justify-content: center;
	flex: 0 0 auto;
	height: 70rpx;
	// padding: $uni-spacing-col-sm * 2 $uni-spacing-row-sm;
	// background: $uni-bg-color;
	// border-top: 1rpx solid #979797;
}
</style>